<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bigbox {
            width: 400px;
            height: auto;
            border: 1px solid #2d2d2d;
            margin: 100px auto 0 auto;
        }

        .gamequyu {
            width: 100%;
            height: 600px;
            position: relative;
            overflow: hidden;
            background-color: #fefefe;
            background-size: 100%;
            background-image: url("./img/c.jpg");
        }

        .start {
            position: absolute;
            width: 400px;
            height: 50px;
            color: white;
            text-align: center;
            line-height: 50px;
            background-color: rgb(87, 165, 42);
            font-size: 30px;
            cursor: pointer;
            z-index: 9999;
        }

        .zhuti {
            width: 100%;
            height: 600px;
            position: absolute;
            top: -150px;
        }

        .jifen {
            width: 400px;
            height: 50px;
            font-size: 30px;
            text-align: center;
            line-height: 50px;
            color: white;
            margin: 0 auto;
            background-color: rgb(151, 240, 124);
        }

        .row {
            width: 400px;
            height: 150px;

        }

        .row div {
            width: 100px;
            height: 150px;
            border: 1px solid #707070;
            border-top-width: 0;
            border-left-width: 0;
            float: left;
            cursor: pointer;
            box-sizing: border-box;
        }

        .zhezhaoceng {
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 999;
            display: none;
        }
    </style>
</head>

<body>
    <audio src="./src/a.mp3" autoplay="true" loop="true"></audio>
    <div class="bigbox">
        <!-- 显示游戏的区域 -->
        <div class="gamequyu">
            <!-- 上面显示一个游戏开始的按钮 -->
            <div class="start">游戏开始</div>
            <!-- 再显示一个游戏的主体部分 -->
            <div class="zhuti"></div>
            <div class="zhezhaoceng"></div>

        </div>
        <!-- 下面再显示一个计分的盒子 -->
        <div class="jifen">经典模式</div>
    </div>
    <script>
        // 先找到主体内容的盒子,添加到这个盒子中去
        var zhuti = document.getElementsByClassName('zhuti')[0];
        //找到计分 , 每点击一次, 就让分数++;
        var jifen = document.getElementsByClassName('jifen')[0];
        // 找到游戏开始按钮, 点击让它影藏,结束时显示并把里面的文字改变为'游戏结束'
        var start = document.getElementsByClassName('start')[0];
        // 找到遮罩层, 结束游戏的时候显示
        var zhezhaoceng = document.getElementsByClassName('zhezhaoceng')[0];
        // addbox('row')
        //动态创建盒子的函数
        function addbox(classname) {
            // 思路: 
            // 1: 先封装一个函数动态的创建盒子;
            // 2: 一个盒子里装了四个小盒子;
            // 3: 随机一个数,让这四个小盒子的某一个的颜色改为黑色 ;
            // 4: 给这个小盒子添加类名,设置样式;
            // 5: 随机数作为下标, 给这个随机数的下标的小盒子添加一个类名;
            // 6: 添加到'zhuti'里面去,显示在页面上(如果zhuti里面有内容了,就要添加到所有内容的最前面,如果没有,接直接添加)
            // 生成随机数作为四个盒子的下标
            var index = Math.floor(Math.random() * 4)
            // console.log(index);
            //创建一个盒子; 
            var bigdiv = document.createElement('div');
            bigdiv.className = classname;
            // 再依次创建四个小盒子;添加到刚刚创建的大盒子中;
            for (var i = 0; i < 4; i++) {
                var smallbox = document.createElement('div')
                bigdiv.appendChild(smallbox)
            }
            // 判断主体里面有没有盒子 ; 
            // 如果已经存在盒子,就要添加到它们的最前面
            // 如果没有,就可以直接添加到页面上
            if (zhuti.children.length == 0) {
                zhuti.appendChild(bigdiv)
            } else {
                zhuti.insertBefore(bigdiv, zhuti.children[0])
            }
            // 给随机下标的盒子添加样式的背景色为黑色;
            bigdiv.children[index].style.backgroundColor = 'black';
            // 再给这个随机的盒子添加一点东西,可以用来做判断
            bigdiv.children[index].className = 'random_box';
        }
        //计分与控制速度的函数
        function move(obj) {
            // 封装一个计时器移动的方法, 让主体内的内容动起来;
            // 思路: 
            //   1: 先获取元素的最终样式,距离顶部的top值;
            //   2: 声明两个变量; 一个用来改变元素距离顶部的top值; 一个用来计分数; 
            var num = 0;
            var sudu = 5;
            // 创建一个计时器让它缓动显示到页面
            //在样式里面就设置了top值为-150px；
            //通过计时器让它的top值缓动到页面， 当它的top值等于0的时候，又让它的top值变为-150px；
            //就调用创建元素的方法再创建一个盒子，让它插在这个显示在页面上的盒子的前面
            obj.timeID = setInterval(function () {
                var nowtop = parseInt(getComputedStyle(obj)['top']) + sudu;
                // console.log(nowtop);
                obj.style.top = nowtop + 'px';
                if (parseInt(getComputedStyle(obj)['top']) >= 0) {
                    addbox('row')
                    obj.style.top = -150 + 'px'
                }
                // 判断条件：在移动的时候，如果用户没有点击到带有颜色的盒子，让盒子超过了界限；就结束游戏；
                if (obj.children.length == 6) {
                    for (var i = 0; i < 4; i++) {
                        if (obj.children[obj.children.length - 1].children[i].className == 'random_box') {
                            jifen.innerHTML = '当前最高得分:' + num;
                            start.style.display = 'block'
                            start.innerHTML = '游戏结束';
                            start.style.display = 'block';
                            start.style.backgroundColor = 'green';
                            start.style.height = 60 + 'px';
                            start.style.fontSize = 30 + 'px';
                            zhezhaoceng.style.display = 'block';
                            clearInterval(obj.timeID)

                        }
                    }
                    // 让主体的内容的长度永远等于6,如果不等于6,就会出现按下第一个带'random_box'类名的小盒子,之后就不会再回到以上的判断里面了;
                    obj.removeChild(obj.children[obj.children.length - 1])
                }
                // console.log(obj.children.length);

                // 判断用户点击的时候:条件:如果没有点中指定的盒子(类名为'random_box')的盒子,就结束游戏;不然就计分num++;
                obj.onmousedown = function (event) {
                    // 根据事件对象里面的事件源来进行判断;
                    //当它的事件源的名字等于'random_box'的时候;
                    if (event.target.className == 'random_box') {
                        // 让这个事件源的的背景色变为红色;
                        event.target.style.backgroundColor = 'aqua';
                        //当用户点击了事件源时,把他的类名清空, 不然只变了颜色,到了第6个,判断类名还是'random_box'时, 就会结束游戏;
                        event.target.className = '';
                        // 计分
                        num++;
                        // 显示在当前得分的盒子里
                        jifen.innerHTML = '当前得分' + num;
                    } else {
                        // 结束游戏
                        clearInterval(obj.timeID)
                        start.style.display = 'block';
                        start.style.backgroundColor = 'green';
                        start.style.height = 60 + 'px';
                        start.style.fontSize = 30 + 'px';
                        start.innerHTML = '再来一局';
                        jifen.innerHTML = '最终得分' + num;
                        // 让遮罩层显示
                        zhezhaoceng.style.display = 'block';
                    }
                    // 加速(判断分数到了多少时,让主体下降的top值变大)
                    if (num % 5 == 0) {
                        sudu++;
                    }
                }

            }, 20)
        }
        // 当它点击开始按钮的时候,再调用函数;运行起来;
        start.onclick = function () {
            //如果事重新来一局,那就先把页面上已经创建的盒子先清除;
            if (zhuti.children.length != 0) {
                zhuti.innerHTML = ''
            }
            // 让遮罩层隐藏
            zhezhaoceng.style.display = 'none';
            // 让开始的按钮影藏 
            this.style.display = 'none';
            jifen.innerHTML = '当前得分:0'
            move(zhuti)
        }
    </script>
</body>

</html>